<template>
  <div>
    <el-dialog v-model="dialog" title="树状结构" :close-on-click-modal="false">
      <div>
        <Tree
          node-key="id"
          :data="data.list"
          show-checkbox
          :placeholder="'asdasdasd'"
        >
          <div>asdasda</div>
        </Tree>
      </div>
      <template #footer>
        <el-button @click="onHide">关闭 </el-button>
        <el-button @click="onHide"> 确认</el-button>
      </template>
    </el-dialog>
    <el-button @click="onDialog">ss </el-button>
    <!-- 页签组件 -->
    <Herder></Herder>
  </div>
</template>

<script setup lang="ts">
import { ElButton, ElDialog } from 'element-plus';
import { defineAsyncComponent, reactive, ref, onMounted } from 'vue';
import Herder from './Terr/Herder.vue';
const Tree = defineAsyncComponent(() => import('./Terr/index.vue'));
const dialog = ref(false);

function onDialog() {
  dialog.value = true;
}
function onHide() {
  dialog.value = false;
}

const data = reactive({
  list: [] as MenuTree[]
});

interface MenuTree {
  label: string;
  children?: MenuTree[];
}

// 模拟树状结果的数据传递
function created() {
  return new Promise((resolve, rej) => {
    setTimeout(() => {
      resolve([
        {
          id: 1,
          label: 'Level one 1',
          children: [
            {
              id: 3,
              label: 'Level two 1-1',
              children: [
                {
                  id: 4,
                  label: 'Level three 1-1-1'
                }
              ]
            }
          ]
        }
      ]);
    }, 500);
  });
}

onMounted(() => {
  created().then((res) => {
    data.list = res as MenuTree[];
  });
});
</script>

<style scoped></style>
